<template>
  <div class="app-container">

    <el-button type="danger" icon="el-icon-delete" circle @click="del">删除</el-button>
    <el-button type="success" icon="el-icon-check" circle @click="toAdd">添加</el-button>
    <el-button type="primary" icon="el-icon-edit" circle @click="upd">修改</el-button>

    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="deptId"
      border
      :tree-props="{children: 'depts', hasChildren: 'hasChildren'}"
      @selection-change="handleSelectionChange"
    >

      <el-table-column type="selection" width="55" />
      <el-table-column prop="deptId" label="部门id" sortable width="180" />
      <el-table-column prop="name" label="部门名称" sortable width="180" />
      <el-table-column prop="cname" label="上级部门" />
      <el-table-column prop="contacts" label="联系人" />
      <el-table-column prop="deptNo" label="排序号" />
    </el-table>

    <!-- 添加 -->
    <el-dialog :title="title" :visible.sync="dialogVisible">
      <el-form :model="form">
        <el-form-item label="部门名称" :label-width="formLabelWidth" >
          <el-input v-model="form.name" autocomplete="off" placeholder="部门名称"></el-input>
        </el-form-item>

        <el-form-item label="上级部门" :label-width="formLabelWidth"  >
          <el-input v-model="form.cname" autocomplete="off"  placeholder="上级部门" readonly @focus="centerDialogVisible=true"></el-input>
          <!--        <el-input v-model="form.parentId" autocomplete="off" v-show="form.parentId"></el-input>-->
          <el-header v-model="form.paresntId" autocomplete="off"></el-header>
          <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <el-tree :data="data" :props="DeptdefaultProps" @node-click="handleNodeClick"></el-tree>
            <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
          </el-dialog>
        </el-form-item>
        <el-form-item label="联系人" :label-width="formLabelWidth" >
          <el-input v-model="form.contacts" autocomplete="off"  placeholder="联系人"></el-input>
        </el-form-item>

        <el-form-item label="排序号" :label-width="formLabelWidth" >
          <el-input v-model="form.deptNo" autocomplete="off" placeholder="序号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>





  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      dialogVisible:false,
      formLabelWidth: '120px',
      title:'添加/修改操作',
      flag:"add",
      centerDialogVisible:false,
      multipleSelection: [],
      form: {
        deptId: '',
        name: '',
        parentId: '',
        contacts: '',
        deptNo:0
      },
      data: [],
      DeptdefaultProps:{
        value:"deptId",
        children: 'depts',
        label: 'name'
      },
    }
  }, created() {
    this.init();
    this.initTree();
  },
  methods: {
    init() {
      /* 'http://localhost:10001/wish/sys-dept/getList' */
      this.axios.get('http://localhost/api/sys/wish/sys-dept/getList').then((res) => {
        this.tableData = res.data

      })
    },
    handleSelectionChange(vals) {
      this.multipleSelection = new Array()
      for(let val of vals){
        this.multipleSelection.push(val.deptId)
      }
      /* this.form =  vals; */
      /* this.$alert(vals) */

    },findbyidlist(){
      this.init();
    }

    ,
    del(){
      var ids = this.multipleSelection.join(",")
      this.$alert(ids)
      /* this.$confirm("确认要删除吗?").then(res=>{ */
      this.axios.get("http://localhost/api/sys/wish/sys-dept/del?ids="+ids).then(respons=>{
        if(respons.data){
          this.$alert("删除成功!")
          this.init()
        }

      })
      /* }) */
    },
    toAdd(){
      this.dialogVisible = true
      this.flag = "add"
    },
    upd(){
      this.dialogVisible = true
      this.flag = "upd"
      /* let id = this.multipleSelection.[0] */
      this.axios.post("http://localhost/api/sys/wish/sys-dept/getOneId?id="+this.multipleSelection.[0]).then(res=>{
        this.form.deptId = res.data.deptId
        this.form.name = res.data.name
        this.form.cname = res.data.cname
        this.form.parentId = res.data.parentId
        this.form.contacts = res.data.contacts
        this.form.deptNo = res.data.deptNo
      })


    },
    initTree(){
      this.axios.get('http://localhost/api/sys/wish/sys-dept/getList').then((res) => {
        this.data = res.data

      })
    },
    handleNodeClick(data) {
      this.form.cname=data.name
      this.form.parentId=data.deptId
      this.centerDialogVisible=false
    },
    save(){
      if(this.flag == "add"){
        this.axios.post("http://localhost/api/sys/wish/sys-dept/add",this.form).then(res=>{
          if(res.data){
            this.$alert("添加成功!")
            this.dialogVisible = false
            this.init()
          }
        })
      }else if(this.flag == "upd"){
        this.axios.post("http://localhost/api/sys/wish/sys-dept/upd",this.form).then(res=>{
          if(res.data){
            this.$alert("修改成功!")
            this.dialogVisible = false
            this.init()
          }
        })
      }
    }
  }
}
</script>
